<template>
	<view class="container">
		<!-- <u-navbar autoBack :title="isOpenModel ? '关闭青少年模式' : '开启青少年模式'" :fixed='true' :placeholder="true">
		</u-navbar> -->
		<view class="inputs-bed">
			<view class="title">请输入密码</view>
			<wakaryInput type="bottom" @finish="handleFinish" />
		</view>
		<view class="">
			<view class="open-model" @click="handleConfirm">{{isOpenModel ? '确定关闭' : '下一步'}}</view>
			<view v-if="isOpenModel" class="jump-step" @click="handleFotgotPsw">忘记密码？</view>
		</view>
	</view>
</template>

<script>
	import wakaryInput from './components/wakaryInput/wakaryInput.vue'
	export default {
		components: {
			wakaryInput
		},
		data() {
			return {
				isOpenModel: false,
				password: ''
			}
		},
		onLoad() {
			this.isOpenModel = getApp().hasOpneAdolescentModel()
			uni.setNavigationBarTitle({
				title: this.isOpenModel ? "关闭青少年模式" : "开启青少年模式"
			})
		},
		methods: {
			handleFinish(val) {
				this.password = val
				getApp().globalData['modelPassword'] = val
			},
			handleConfirm() {
				if (this.$isEmpty(this.password)) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					})
					return
				}
				// 青少年模式已打开，输入密码关闭
				if (this.isOpenModel) {
					const _adolescentModelPassword = uni.getStorageSync('adolescentModelPassword')
					if (this.password === _adolescentModelPassword) {
						uni.showToast({
							title: '青少年模式已关闭',
							icon: 'none',
							duration: 3000
						})
						uni.removeStorageSync('adolescentModelPassword')
						uni.reLaunch({
							url: "/pages/index"
						})
					} else {
						uni.showToast({
							title: '密码不正确',
							icon: 'none'
						})
					}
					return
				}

				uni.navigateTo({
					url: "/minePages/adolescentModel/stepTwo"
				})
			},

			handleFotgotPsw() {
				uni.removeStorageSync('adolescentModelPassword')
				this.logOutFn();
				uni.reLaunch({
					url: '/pages/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		width: 100%;
		min-height: 100vh;
		position: fixed;
		top: 0;
		left: 0;
		background-color: #f8f8f8;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			padding: 10% 0 40rpx 0;
			text-align: center;
		}

		.inputs-bed {
			padding: 0 14%;
		}

		.open-model {
			width: 500rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 40rpx;
			font-size: 28rpx;
			color: #ffffff;
			background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
			margin: 20% auto 0 auto;
		}

		.jump-step {
			width: 160rpx;
			padding: 20rpx 10rpx;
			text-align: center;
			font-size: 24rpx;
			color: #999999;
			margin: 10rpx auto 0 auto;
		}
	}
</style>